<template>
  <div class="table-model">
    <el-table :data="tableData" style="width: 100%;" ref="deviceTable">
      <el-table-column align="center" prop="deviceId" label="设备ID">
        <template slot-scope="scope">
          <span
            class="status-icon"
            :class="`status-${scope.row.error_class}`"
          ></span>
          <span :class="`text-${scope.row.error_class}`">
            {{ scope.row.deviceId }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="location"
        label="所在位置"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="type"
        label="故障类型"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    deviceErrorList: Array
  },
  data() {
    return {
      timer: '',
      tableData: [],
      startNum: 0
    };
  },
  watch: {
    deviceErrorList(newVal, oldVal) {
      if (newVal.length !== oldVal.length) {
        this.tableData = newVal;
        this.scrollTable();
      } else if (newVal.length === newVal.length) {
        clearInterval(this.timer);
        this.scrollTable();
      }
      // 计算是否溢出容器
      console.log(oldVal, newVal);
    }
  },
  methods: {
    // 获取当前 table的高度 *2 然后
    scrollTable() {
      let boxHeight = Math.ceil(
        document.getElementsByClassName('table-model')[0].clientHeight - 48
      );
      let tableBody = document.getElementsByClassName(
        'el-table__body-wrapper'
      )[0];
      // 当前表格的高度
      let height = tableBody.clientHeight;
      // 当前数据的个数
      let num = this.deviceErrorList.length;
      // 一行的高度是 48
      let halfHeight = num * 48;
      console.log(boxHeight, height, num, halfHeight);
      if (boxHeight > halfHeight) {
        console.log('不启动滚动');
        clearInterval(this.timer);
        tableBody.style.top = 0 + 'px';
      } else {
        console.log('启动滚动');
        this.tableData = [...this.deviceErrorList, ...this.deviceErrorList];
        // this.tableData.push(...this.deviceErrorList);
        // 如果高度不够的话
        this.timer = setInterval(() => {
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (-this.startNum >= halfHeight) {
            // 重置table距离顶部距离
            this.startNum = -1;
          } else {
            this.startNum -= 1;
          }
          tableBody.style.top = this.startNum + 'px';
          // 元素自增距离顶部1像素
        }, 100);
      }
    }
  },
  mounted() {},
  filters: {
    statusCn(val) {
      let returnStr = '';
      switch (val) {
        case 1:
          returnStr = '未处置';
          break;
        case 2:
          returnStr = '处置中';
          break;
        case 3:
          returnStr = '已处置';
          break;
      }
      return returnStr;
    }
  }
};
</script>

<style lang="scss" scoped>
.table-model {
  position: relative;
  top: 0;
  height: 100%;
  ::v-deep .el-table td,
  ::v-deep .el-table th.is-leaf {
    border-bottom: 1px solid #29304d;
  }
  //  表格头不动
  ::v-deep .el-table__header-wrapper {
    position: relative;
    z-index: 10;
  }
  ::v-deep .el-table__body-wrapper {
    z-index: 1;
  }
  ::v-deep .el-table th,
  ::v-deep .el-table tr {
    background: #121626;
  }
  ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
    background: #0b0f20;
  }
  ::v-deep .el-table--border::after,
  ::v-deep .el-table--group::after,
  ::v-deep .el-table::before {
    background-color: #29304d;
  }
  ::v-deep .el-table .cell {
    color: #fff;
  }
}

.status-icon {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
  background: #fff;
  margin-right: 8px;
}
.status-1 {
  background: linear-gradient(#ec924b, #de6173);
}
.status-2 {
  background: linear-gradient(#94ffce, #61daa2);
}
.status-3 {
  background: linear-gradient(#333fff, #333fff);
}
.text-1 {
  color: #de6173;
}
.text-2 {
  color: #61daa2;
}
.text-3 {
  color: #aaa;
}
.table-title {
  font-size: 16px;
  border-bottom: 1px solid #29304d;
  text-align: left;
  padding: 0 20px;
  margin: 0;
  line-height: 44px;
  font-weight: normal;
  img {
    margin-right: 6px;
    vertical-align: middle;
  }
}
</style>
<style></style>
